<template>
	<view class="overview-container">
		<view class="left-img">
			<img class="cus-img" src="@/static/images/overview/situation-dailyPowergeneration.svg" />
		</view>
		<view class="right">
			<view class="right-value">{{value}}</view>
			<view class="right-title">{{name}}</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'
	defineProps({
		name: {
			type: String
		},
		value: {
			type: String
		}
	})
</script>

<style lang="scss" scoped>
	.overview-container {
		height: 160rpx;
		display: flex;
		flex: 0 0 49%;
		align-items: center;


		border-right: 2rpx solid #f6f6f6;
		border-bottom: 2rpx solid #f6f6f6;

		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #cccccc;

		.left-img {
			.cus-img {
				width: 72rpx;
				height: 72rpx;
				margin-top: 40rpx;
				margin-left: 20rpx;
				margin-right: 30rpx;
			}
		}

		.right {
			.right-value {
				margin-top: 20rpx;
				font-size: 48rpx;
				font-family: 'DINAlternateBold';
				font-weight: bold;
				color: #222222;
			}

			.right-title {
				margin-top: 10rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(34, 34, 34, 0.5);
			}
		}
	}
</style>